<template>
    <div class="manage-index">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form :model="params">
                    <el-form-item>
                        <el-input v-model="params.materialName" clearable placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-tree :data="data" :props="defaultProps" default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
            </el-col>

            <el-col :span="18">
                <el-form :inline="true" :model="params">
                    <el-form-item label="物料编码">
                        <el-input v-model="params.materialProductCode" placeholder="请输入物料编码"></el-input>
                    </el-form-item>
                    <el-form-item label="物料名称">
                        <el-input v-model="params.productName" placeholder="请输入物料名称"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                    <el-button type="primary" plain @click="paramsReset" :icon="Refresh">重置</el-button>
                </el-form>

                <el-button style="background-color:#ADD8E6" @click="insert" :icon="Plus">新增</el-button>
                <el-button style=" background-color: #90EE90" @click="UpdateID" :disabled="isSingleRowSelected"
                    :icon="Edit">修改</el-button>
                <el-button style="background-color: #FFCCCB" plain :disabled="deleteDisabled" @click="Delete1"
                    :icon="Delete">删除</el-button>


                <el-table style="width: 100%" :data="salesorder" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column prop="materialProductCode" label="物料编码" width="120"></el-table-column>
                    <el-table-column prop="productName" label="物料名称" width="120"></el-table-column>
                    <el-table-column prop="specificationAndModel" label="规格型号" width="120"></el-table-column>
                    <el-table-column prop="unitName" label="单位" width="120"></el-table-column>
                    <el-table-column prop="material" label="物料/产品" width="120" v-slot="options">
                        <span v-if="options.row.material == 0">物料</span>
                        <span v-if="options.row.material == 1">产品</span>
                    </el-table-column>
                    <el-table-column prop="materialName" label="所属分类" width="120">
                        <template #default="scope">
                            {{ scope.row.materialName }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="是否启用" width="150" align="center" v-slot="options">
                        <el-tag :type="options.row.status == '0' ? 'success' : 'danger'">
                            {{ options.row.status == '0' ? '是' : '否' }}
                        </el-tag>
                    </el-table-column>

                    <el-table-column prop="setSafetyStock" label="设置安全库存" width="150" align="center" v-slot="options">
                        <el-tag :type="options.row.setSafetyStock == '0' ? 'success' : 'danger'">
                            {{ options.row.setSafetyStock == '0' ? '是' : '否' }}
                        </el-tag>
                    </el-table-column>
                    <el-table-column prop="creationTime" label="创建时间" width="200"></el-table-column>
                    <el-table-column label="操作" width="300px">
                        <template #default="scope">
                            <el-button :row="scope.row" link type="primary" @click="Update(scope.row)"
                                :icon="Edit">修改</el-button>
                            <el-button type="primary" link @click="Delete2(scope.row)" :icon="Delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <!-- 分页组件 -->
        <el-row>
            <el-col :span="24">
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="params.currentPage" v-model:page-size="params.pageSize"
                        background :default-page-size="params.pageSize" :page-sizes="pageSizes"
                        layout="total,sizes,prev,pager,next,jumper" :total="parseInt(pageResult.total)"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <!-- 分页组件结束 -->


        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" width="70%" @close="handleClose">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="物料编码" label-width="120px">
                        <el-input v-model="formdata.materialProductCode" placeholder="请输入物料编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="物料名称" label-width="120px">
                        <el-input v-model="formdata.productName" placeholder="请输入物料名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="规格型号" label-width="120px">
                        <el-input v-model="formdata.specificationAndModel" placeholder="请输入规格型号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单位" label-width="120px">
                        <el-select v-model="formdata.unitId" placeholder="请选择单位">
                            <el-option v-for="item in unitList" :key="item.id" :label="item.unitName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="7">
                    <el-form-item label="是否启用" label-width="120px">
                        <el-radio-group v-model="formdata.status">
                            <el-radio value="0">是</el-radio>
                            <el-radio value="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="是否设置安全库存" label-width="150px">
                        <el-radio-group v-model="formdata.setSafetyStock">
                            <el-radio value="0">是</el-radio>
                            <el-radio value="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="物料/产品分类" label-width="120px">
                        <el-tree-select v-model="formdata.materialId" :data="data" :props="defaultProps" check-strictly
                            :render-after-expand="false" style="width: 240px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注" label-width="120px">
                        <el-input v-model="formdata.remark" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注"
                            clearable type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!--bom部分-->>
            <el-tabs type="border-card" v-show="activeName">
                <el-tab-pane label="BOM组成">
                    <el-button style="background-color:#ADD8E6" @click="insertbom">新增</el-button>
                    <el-button style="background-color: #FFCCCB" plain :disabled="deleteDisabled"
                        @click="Deletebom">删除</el-button>
                    <el-table style="width: 100%" :data="formdata.boms" @selection-change="handleSelectionChangebom">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column prop="bomMaterialCode" label="物料编码" width="120"></el-table-column>
                        <el-table-column prop="bomMaterialName" label="物料名称" width="120"></el-table-column>
                        <el-table-column prop="bomMaterialSpec" label="规格型号" width="120"></el-table-column>
                        <el-table-column prop="bomUnit" label="单位" width="120"></el-table-column>
                        <el-table-column prop="quantity" label="使用比例" width="120"></el-table-column>
                        <el-table-column prop="remark" label="备注" width="120"></el-table-column>
                        <el-table-column label="操作" width="300px">
                            <template #default="scope">
                                <el-button :row="scope.row" link type="primary" @click="Updatebom(index, scope.row)"
                                    :icon="Edit">修改</el-button>
                                <el-button type="primary" link @click="Deletebom2(scope.row)"
                                    :icon="Delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 分页组件 -->
                <el-row>
                    <el-col :span="24">
                        <div class="demo-pagination-block">
                            <el-pagination v-model:current-page="paramsBom.currentPage"
                                v-model:page-size="paramsBom.pageSize" background
                                :default-page-size="paramsBom.pageSize" :page-sizes="pageSizesBom"
                                layout="total,sizes,prev,pager,next,jumper" :total="parseInt(pageResultBom.total)"
                                @size-change="handleSizeChangebom" @current-change="handleCurrentChangebom">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
                <!-- 分页组件结束 -->
            </el-tabs>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="onSubmit"> 确定</el-button>
                    <el-button type="primary" @click="close">关闭111</el-button>
                </div>
            </template>
        </el-dialog>



        <el-dialog :destroy-on-close="true" :title="titlebom" v-model="visibleBom" width="70%" @close="handleClosebom">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form :model="params">
                        <el-form-item>
                            <el-input v-model="params.productName" clearable placeholder="请输入分类名称"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </el-col>

                <el-col :span="18">
                    <el-form :inline="true" :model="params">
                        <el-form-item label="物料编码">
                            <el-input v-model="params.materialProductCode" placeholder="请输入物料编码"></el-input>
                        </el-form-item>
                        <el-form-item label="物料名称">
                            <el-input v-model="params.materialName" placeholder="请输入物料名称"></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                        <el-button type="primary" plain @click="paramsReset" :icon="Refresh">重置</el-button>
                    </el-form>

                    <el-table style="width: 100%" :data="salesorder" @selection-change="handleSelectionChangebom">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column prop="materialProductCode" label="物料编码" width="120"></el-table-column>
                        <el-table-column prop="productName" label="物料名称" width="120"></el-table-column>
                        <el-table-column prop="specificationAndModel" label="规格型号" width="120"></el-table-column>
                        <el-table-column prop="unitName" label="单位" width="120"></el-table-column>
                        <el-table-column prop="material" label="物料/产品" width="120" v-slot="options">
                            <span v-if="options.row.material == 0">物料</span>
                            <span v-if="options.row.material == 1">产品</span>
                        </el-table-column>
                        <el-table-column prop="materialName" label="所属分类" width="120">
                            <template #default="scope">
                                {{ scope.row.materialName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="是否启用" width="150" v-slot="options">
                            <span v-if="options.row.status == '0'">是</span>
                            <span v-if="options.row.status == '1'">否</span>
                        </el-table-column>
                        <el-table-column prop="setSafetyStock" label="设置安全库存" width="150" v-slot="options">
                            <span v-if="options.row.setSafetyStock == '0'">是</span>
                            <span v-if="options.row.setSafetyStock == '1'">否</span>
                        </el-table-column>
                        <el-table-column prop="creationTime" label="创建时间" width="200"></el-table-column>
                    </el-table>

                    <!-- 移动按钮到这里 -->
                    <div class="dialog-footer">
                        <el-button type="primary" @click="onSubmitbom"> 确定</el-button>
                        <el-button type="primary" @click="closebom">关闭</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>

        <!-- 修改bom弹窗 -->
        <el-dialog :destroy-on-close="true" :title="titleupdatebom" v-model="visibleupdateBom" width="30%"
            @close="handleClosebom">
            <el-form label-width="120px" :model="bomdata">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="BOM物料编码">
                            <el-input v-model="bomdata.bomMaterialCode" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="BOM物料名称">
                            <el-input v-model="bomdata.bomMaterialName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="BOM物料规格">
                            <el-input v-model="bomdata.bomMaterialSpec" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="BOM物料单位">
                            <el-select v-model="bomdata.bomUnit" placeholder="">
                                <el-option v-for="item in unitList" :key="item.id" :label="item.unitName"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="BOM使用比例">
                            <el-input-number v-model="bomdata.quantity" @change="handleChange" :min="1"
                                :max="999999"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="BOM物料备注">
                            <el-input v-model="bomdata.remark" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="onSubmitupdatebom">确定</el-button>
                    <el-button @click="closeupdatebom">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>


import { ref, onMounted } from 'vue';
import {
    findMaterial, findmaterialManagement, insertmaterialManagement,
    deletematerialManagement, updatematerialManagement, findBomMaterial,
    insertBomMaterial, updateBomMaterial, deleteBomMaterial
} from '@/apis/xms';
import { getPageUnits } from '@/apis/zyj/units'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Delete, Plus, EditPen, Edit } from '@element-plus/icons-vue';







let data = ref([]);
const visible = ref(false) // 弹窗显示状态
const activeName = ref(false) // 弹窗tab页
const visibleBom = ref(false) // bom新增弹窗显示状态
const title = ref('') // 弹窗标题
const titlebom = ref('') // bom弹窗标题
const titleupdatebom = ref('') // bom修改弹窗标题
const visibleupdateBom = ref(false) // bom修改弹窗显示状态
let ids = ref([]) // 选中行的id数组
let bom = ref([]) // 选中行的bom数组
let idsbom = ref([]) // 选中行的bomId数组
const deleteDisabled = ref(true) // 删除按钮禁用状态,默认禁用
const isSingleRowSelected = ref(true) // 修改按钮禁用状态,默认禁用
let roleVal = ref([]); //选中行
const formdata = ref({   //弹窗表单数据
    materialProductCode: '',
    productName: '',
    specificationAndModel: '',
    unitId: '',
    materialId: '',
    materialName: '',
    status: '',
    setSafetyStock: '',
    creationTime: '',
    boms: []
})
const unitList = ref([]) // 单位列表
const pageResult = ref({}) // 表格分页数据
const pageSizes = [2, 5, 8, 10] // 分页大小
const pageSizesBom = [2, 5, 8, 10] // bom 分页大小  
const pageResultBom = ref({}) // bom 分页数据
const selectedMaterialNo = ref(null); // 定义一个响应式变量来存储 materialNo
const salesorder = ref([{}]);
const bomdata = ref({
    bomMaterialId: '',
    bomMaterialCode: '',
    bomMaterialName: '',
    bomMaterialSpec: '',
    bomUnit: '',
    bomMaterial: '',
    quantity: '',
    remark: ''
})






//初始化状态（设置默认值）
const params = ref({
    currentPage: 1,
    pageSize: 5,
    materialId: '',
    materialName: '',
    materialProductCode: '',
    productName: '',

})

const paramsBom = ref({
    currentPage: 1,
    pageSize: 5,
    materialProductCode: '',
})


// 参数搜索查询数据
const handleSearch = async () => {
    console.log(params.value)
    pageResult.value = await findmaterialManagement(params.value)
    console.log(pageResult.value)
    salesorder.value = pageResult.value.records


}

/**
 * 处理当前页码变化
 * @param currentPage 当前页码
 */
const handleCurrentChange = (currentPage) => {
    params.value.currentPage = currentPage
    handleSearch() // 数据刷新
}

/**
 * 处理分页大小变化
 * @param size 分页大小
 */
const handleSizeChange = (size) => {
    params.value.pageSize = size
    handleSearch() // 数据刷新
}

const handleSearchbom = async () => {
    console.log(paramsBom.value);
    pageResultBom.value = await findBomMaterial(paramsBom.value);
    console.log(pageResultBom.value);
    // 更新本地数据
    formdata.value.boms = pageResultBom.value.records[0].boms;
};

const handleCurrentChangebom = (currentPage) => {
    paramsBom.value.currentPage = currentPage;
    handleSearchbom(); // 数据刷新
};

const handleSizeChangebom = (size) => {
    paramsBom.value.pageSize = size;
    handleSearchbom(); // 数据刷新
};




//树形菜单点击事件
const defaultProps = {
    children: 'children',
    label: 'materialName',
    value: 'materialId'
}
const handleNodeClick = (dara, node, vnode, event) => {
    params.value.materialId = node.data.materialId;
    handleSearch();
}
let insert = () => {
    visible.value = true;
    activeName.value = false;
    title.value = '新增物料产品';
}

let UpdateID = () => {
    visible.value = true;
    activeName.value = true;
    title.value = '修改物料产品';
}


let Update = async (row) => {
    visible.value = true;
    activeName.value = true;
    title.value = '修改物料产品';
    formdata.value = row;
    console.log(row)
    paramsBom.value.materialProductCode = row.materialProductCode;
    unitList.value = await getPageUnits('', '', '-1', '-1')
    pageResultBom.value = await findBomMaterial(paramsBom.value)
    console.log(pageResultBom.value)
    formdata.value.boms = pageResultBom.value.records[0].boms


    //获取bom所需的materialNo
    selectedMaterialNo.value = row.materialNo;
    console.log(`Selected Material No: ${selectedMaterialNo.value}`);
    console.log(formdata.value.boms)
}
/**
 * 提交表单
 */
const onSubmit = async () => {
    if (title.value == '新增物料产品') {
        console.log(formdata.value)
        await insertmaterialManagement(formdata.value)
    } else if (title.value == '修改物料产品') {
        await updatematerialManagement(formdata.value)
    }
    visible.value = false;
    ElMessage.success(`${title.value}成功`)
    handleSearch();
}

onMounted(async () => {
    data.value = await findMaterial();//树形菜单
    pageResult.value = await findmaterialManagement(params.value) // 获取分页数据
    salesorder.value = pageResult.value.records // 获取表格数据
    console.log(salesorder.value)
    // 获取单位列表
    unitList.value = await getPageUnits('', '', '-1', '-1')



})

const handleSelectionChange = (val) => {
    deleteDisabled.value = !val.length
    ids.value = val.map(item => item.materialNo) // 使用map方法过滤出选中行的logId数组

    roleVal.value = val.map(item => item); // 存储选中行的完整数据
    isSingleRowSelected.value = !(val.length === 1); // 如果只有一个选中行，则启用修改按钮
    if (!isSingleRowSelected.value) {
        formdata.value = { ...val[0] };//把选中的这条数据添加给修改数据（）
    }
}

//批量删除
const Delete1 = async (index, row) => {
    ElMessageBox.confirm(`是否确认删除访问编号为${ids.value.join(',')}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 调用删除API  
        await deletematerialManagement(ids.value);  // 将单个ID传递给 deleteCustomer 
        console.log(`删除的ID:`, ids.value);
        pageResult.value = await findmaterialManagement(params.value);
        salesorder.value = pageResult.value.records;
        ids.value = [] // 重置选中行的id数组
        ElMessage({ type: 'success', message: '删除成功' });
        handleSearch();  // 重新查询数据  
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};


const Delete2 = async (row) => {
    ElMessageBox.confirm(`是否确认删除访问编号为${row.materialNo}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 调用删除API  
        await deletematerialManagement([row.materialNo]);  // 将单个ID传递给 deletesspplier 方法

        console.log(`删除的ID:`, row.materialNo);

        // 从表格数据中移除当前行
        salesorder.value = salesorder.value.filter(item => item.materialNo !== row.materialNo);

        ElMessage({ type: 'success', message: '删除成功' });
        handleSearch();  // 重新查询数据  
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};

/*
 * bom新增按钮点击事件
 */
let insertbom = () => {
    visibleBom.value = true;
    titlebom.value = "选择物料产品";
}

/**
 * bom修改按钮点击事件
 */
let Updatebom = async (index, row) => {
    visibleupdateBom.value = true;
    titleupdatebom.value = "修改产品BOM关系";
    bomdata.value = row;
    console.log(row)
}






const onSubmitbom = async () => {
    try {
        // 映射字段
        const mappedBoms = bom.value.map(item => ({
            bomMaterialId: selectedMaterialNo.value,
            bomMaterialCode: item.materialProductCode,
            bomMaterialName: item.productName,
            bomMaterialSpec: item.specificationAndModel,
            bomUnit: item.unitName,
            bomMaterial: item.material,
            quantity: 1, // 默认使用比例为1
            remark: '' // 默认备注为空，可以根据实际需求调整
        }));
        // 调用API插入数据
        await insertBomMaterial(mappedBoms);
        console.log(mappedBoms);

        // 刷新分页数据
        await handleSearchbom(); // 确保在这里调用 handleSearchbom 方法
        console.log(pageResultBom.value)
        // 清空选中的行
        bom.value = [];
        // 显示成功消息
        ElMessage.success("新增成功");
        visibleBom.value = false;
        // 刷新数据
        handleSearch();
    } catch (error) {
        ElMessage.error("新增失败");
        console.error(error);
    }
};

const onSubmitupdatebom = async () => {
    try {
        // 调用API更新数据
        await updateBomMaterial(bomdata.value);
        console.log(bomdata.value);

        // 刷新分页数据
        await handleSearchbom(); // 确保在这里调用 handleSearchbom 方法
        console.log(pageResultBom.value)
        // 显示成功消息
        ElMessage.success("修改成功");
        visibleupdateBom.value = false;
        // 刷新数据
        handleSearch();
    } catch (error) {
        ElMessage.error("修改失败");
        console.error(error);
    }
};

const handleChange = (value) => {
    bomdata.value.quantity = value;
}

const handleSelectionChangebom = (val) => {
    bom.value = val
    deleteDisabled.value = !val.length
    idsbom.value = val.map(item => item.bomId) // 使用map方法过滤出选中行的logId数组
}

//批量删除bom
const Deletebom = async (index, row) => {
    ElMessageBox.confirm(`是否确认删除访问编号为${idsbom.value.join(',')}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 调用删除API  
        await deleteBomMaterial(idsbom.value);
        console.log(`删除的ID:`, idsbom.value);
        pageResultBom.value = await findBomMaterial(paramsBom.value);
        console.log(pageResultBom.value)
        idsbom.value = [] // 重置选中行的id数组
        ElMessage({ type: 'success', message: '删除成功' });
        handleSearchbom();  // 重新查询数据  
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};


//单个删除bom
const Deletebom2 = async (row) => {
    ElMessageBox.confirm(`是否确认删除访问编号为${row.bomId}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 调用删除API  
        await deleteBomMaterial([row.bomId]);
        console.log(`删除的ID:`, row.bomId);
        // 从表格数据中移除当前行
        pageResultBom.value = await findBomMaterial(paramsBom.value);
        console.log(pageResultBom.value)
        pageResultBom.value.records[0].boms = pageResultBom.value.records[0].boms.filter(item => item.bomId !== row.bomId);
        ElMessage({ type: 'success', message: '删除成功' });
        handleSearchbom();  // 重新查询数据  
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};



/**
 * 关闭弹窗,处理数据
 */
const handleClose = () => {
    resetData()
}
/**
 * 重置数据
 */
function resetData() {
    formdata.value = {}
    title.value = ''
}



let close = () => {
    visible.value = false;
    loadData();
};

/**
 * 加载数据
 */
const loadData = async () => {
    await handleSearch();
};

/**
 * 重置搜索参数
 */
const paramsReset = () => {
    params.value = {
        currentPage: 1,
        pageSize: 5,
        materialName: '',
        materialProductCode: '',
        productName: '',
    }
    handleSearch();

}



/**
 * 关闭弹窗,处理数据
 */
const handleClosebom = () => {
    resetDatabom()
}
/**
 * 重置数据
 */
function resetDatabom() {
    titlebom.value = ''
}



let closebom = () => {
    visibleBom.value = false;
    loadData();
};






</script>

<style scoped>
.demo-pagination-block {
    display: flex;
    /* 使其成为 flexbox 容器 */
    justify-content: flex-end;
    /* 将内容对齐到右侧 */
    margin-top: 20px;
}

.button-center {
    display: flex;
    justify-content: center;
}
</style>
